<template>
	<card-block title="通知公告">
		<template slot="button">
			<router-link to="/">
				更多
				<i class="el-icon-arrow-right"></i>
			</router-link>
		</template>
		<template slot="content">
			<ul class="system_notice">
				<li>
					<span class="notify">通知</span>
					<router-link to="/1">您试用的视频切片功能已到期，请前往您试用的视频切片功能已到期，请前往</router-link>
				</li>
				<li>
					<span class="affiche">公告</span>
					<router-link to="/2">您试用的视频切片功能已到期，请前往您试用的视频切片功能已到期，请前往</router-link>
				</li>
				<li>
					<span class="notify">通知</span>
					<router-link to="/3">您试用的视频切片功能已到期，请前往您试用的视频切片功能已到期，请前往</router-link>
				</li>
				<li>
					<span class="affiche">公告</span>
					<router-link to="/4">您试用的视频切片功能已到期，请前往您试用的视频切片功能已到期，请前往</router-link>
				</li>
				<li>
					<span class="notify">通知</span>
					<router-link to="/5">您试用的视频切片功能已到期，请前往您试用的视频切片功能已到期，请前往</router-link>
				</li>
				<li>
					<span class="notify">通知</span>
					<router-link to="/6">您试用的视频切片功能已到期，请前往您试用的视频切片功能已到期，请前往</router-link>
				</li>
			</ul>
		</template>
	</card-block>
</template>

<script>
import cardBlock from './cardBlock';
export default {
	components: { cardBlock }
};
</script>

<style lang="scss" scoped>
.system_notice {
	height: 224px;
	padding: 0 16px 8px;
	overflow: hidden;
	li {
		display: flex;
		align-items: center;
		span {
			font-size: 12px;
			width: 40px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			flex-shrink: 0;
			margin-right: 10px;
			border-radius: 3px;
			&.notify {
				color: var(--primary);
				background-color: var(--primary-background-plain);
			}
			&.affiche {
				color: #e6a23c;
				background-color: #fdf6ec;
			}
		}
		a {
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-decoration: none;
			margin: 9px 0;
			color: #303133;
			&:hover {
				text-decoration: underline;
				color: var(--primary-hover);
			}
		}
	}
}
</style>
